<template>
  <div>
    <div class="footer-box" @click="isShow=!isShow">
      <div class="footer-left" >
        <p :class="{animated:bound,bounceIn:bound}">
          <span class="icon iconfont icon-gouwuche" :class="{act:totalCount}"></span>
          <span class="countChar" v-if="totalCount">{{totalCount}}</span>
        </p>

      </div>
      <div class="footer-center">
        <p>￥{{totalPrice}}</p>
        <span>配送费￥5</span>
      </div>
      <div class="footer-right" :class="{bg:totalPrice}">
        去结算
      </div>
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"  v-for="(ball,index) in balls" :key="index" >
        <div class="qiu" v-show="ball.show">
          <div class="in" ></div>
        </div>
      </transition>

    </div>
    <transition name="car-slide">
      <div class="car-list" v-show="isShow">
        <div class="car-header">
          <span>购物车</span>
          <span> <i class="icon iconfont icon-lajitong"></i> 清除</span>
        </div>
        <ul>
          <li v-for="food in selected">
            <span>{{food.name}}</span>
            <span>￥{{food.price}}</span>
            <div class="car-box">
              <button-bar :food="food"></button-bar>
            </div>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<script>
  import buttonBar from '@/components/buttonBar'
  export default{
    data(){
      return {
        isShow: false,
        balls: [
          {show: false},
          {show: false},
          {show: false},
          {show: false},
          {show: false},
          {show: false},
          {show: false},
          {show: false},
          {show: false},
          {show: false}
        ],
        dropBalls:[],
        bound:false
      }
    },
    components: {
      buttonBar
    },
    props: {
      selected: {
        type: Array
      }
    },
    computed: {
      totalCount(){
        let total = 0
        this.selected.forEach(item => {
          total += item.count
        })
        return total
      },
      totalPrice(){
        let total = 0
        this.selected.forEach(item => {
          total += item.count * item.price
        })
        return total
      }
    },
    methods: {
      beforeEnter(el){
          let count = this.balls.length
        while (count--){
          let ball =  this.balls[count]
          if (ball.show) {
            let rect = ball.target.getBoundingClientRect()
             let left = rect.left - 25
             let top = -(window.innerHeight-rect.top - 40)
            el.style.transform=`translate3d(0,${top}px,0)`
            el.style.webkitTransform=`translate3d(0,${top}px,0)`
             let inner = el.getElementsByClassName('in')[0]
            inner.style.transform=`translate3d(${left}px,0,0)`
            inner.style.webkitTransform=`translate3d(${left}px,0,0)`

          }
        }
      },
      enter(el,done){
          let rest = el.offsetHeight
          this.$nextTick(()=>{
            el.style.transform='translate3d(0,0,0)'
            el.style.webkitTransform='translate3d(0,0,0)'
            let inner = el.getElementsByClassName('in')[0]
            inner.style.transform='translate3d(0,0,0)'
            inner.style.webkitTransform='translate3d(0,0,0)'
            el.addEventListener('transitionend',done)
          })
      },
      afterEnter(el){
        let ball = this.dropBalls.shift()
         if(ball){
            ball.show = false
            el.style.display='none'
            this.bound = true
           let self = this
           clearTimeout(timer)
            var  timer = setTimeout(()=>{
              self.bound = false
            },750)
         }
      },
      ballClick(target){
        for (let i = 0; i < this.balls.length; i++) {
           let ball =  this.balls[i]
          if (!ball.show) {
            ball.show = true
            ball.target = target
            this.dropBalls.push(ball)
            return
          }

        }
      }
    },

  }
</script>
<style lang="less" scoped>
  @import '../../static/less/var.less';
 .qiu{
   position: absolute;
   left: @base*50rem;
   top: @base*10rem;
   transition: 0.75s cubic-bezier(0.2,-0.37,0.86,0.34);
   .in {
     transition: 0.75s;
     width: @base*40rem;
     height: @base*40rem;
     background: #0094FF;
     border-radius: 50%;
   }
 }


  .footer-box {
    width: 100%;
    height: @base*96rem;
    background: #464648;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    color: #fff;
    .footer-left {
      flex: 0.6;
      position: relative;
      z-index: 100;
      p {
        width: @base*80rem;
        height: @base*80rem;
        padding: @base*10rem;
        background: #333;
        position: relative;
        margin-top: -@base*20rem;
        margin-left: @base*20rem;
        border-radius: 50%;
        span:nth-of-type(1) {
          display: block;
          width: 100%;
          height: 100%;
          background: #999;
          border-radius: 50%;
          text-align: center;
          line-height: @base*80rem;
          font-size: @base*50rem;
        }
        .countChar {
          padding: 1px 6px;
          background: red;
          position: absolute;
          top: -@base*15rem;
          left: @base*65rem;
          border-radius: 50%;
          font-size: @base*20rem;

        }
        .act {
          background: #3690E4 !important;
        }
      }
    }
    .footer-center {
      flex: 1.6;
      font-size: @base*15rem;
      line-height: @base*40rem;
      position: relative;
      z-index: 100;
      p {
        font-size: @base*30rem;
      }
      span {
        letter-spacing: 2px;
      }
    }
    .footer-right {
      flex: 0.8;
      text-align: center;
      background: #5B5B5E;
      line-height: @base*96rem;
      position: relative;
      z-index: 100;
      &.bg {
        background: #54DA6B;
      }
    }

  }

  .car-list {
    width: 100%;
    max-height: @base*624rem;
    background: #fff;
    position: absolute;
    bottom: @base*96rem;
    overflow: auto;
    .car-header {
      display: flex;
      justify-content: space-between;
      padding: @base*20rem @base*12rem;
      font-size: @base*20rem;
      background: #f7f7f7;
      color: #999;
      i {
        font-size: @base*30rem;
      }
      span:nth-of-type(1) {
        border-left: 2px solid #3190E8;
        display: inline-block;
        padding-left: @base*10rem;
      }
    }
    ul {
      width: 100%;
      li {
        padding: @base*30rem @base*12rem;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        justify-content: space-between;
        color: #999;
        font-size: @base*25rem;
        overflow: auto;
        span:nth-of-type(1) {
          width: @base*240rem;
        }
        span:nth-of-type(2) {
          color: orangered;
        }
        .car-box {
          width: @base*100rem;
        }
      }
    }
  }

  .car-slide-enter-active, .car-slide-leave-active {
    transition: 0.5s;
  }

  .car-slide-enter {
    transform: translateY(100%);
  }

  .car-slide-leave-active {
    transform: translateY(100%);
  }
</style>
